
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Bootstrap - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Bootstrap - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">jQuery validate 插件提供了哪些核心特性来简化表单验证？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">jQuery validate 插件的核心特性包括：1. 内置19类验证规则（如必填、数字、Email等）；2. 支持方便地自定义验证规则；3. 提供简单且可自定义的验证信息提示功能；4. 支持实时验证，即在用户输入时（通过 keyup 或 blur 事件）进行验证，而不仅仅在表单提交时。</div>
          </div>
          <div class="card-source">来源: 1.1 validate概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在使用 jQuery validate 插件时，如何为表单元素定义验证规则和自定义错误提示信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过调用 `$("选择器").validate()` 方法并传入一个配置对象。该对象包含两个主要的键：`rules` 用于定义验证规则，其中键是表单元素的 name 属性，值是具体的校验器；`messages` 用于定义对应的自定义错误提示信息。</div>
          </div>
          <div class="card-source">来源: 1.2 validate使用步骤</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在 jQuery validate 插件中，`equalTo` 规则的作用是什么？请举例说明其典型应用场景。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`equalTo` 规则用于验证一个字段的输入值必须与另一个字段的值相同。其典型应用场景是“确认密码”功能，例如 `repassword:{equalTo:"[name='password']"}`，这表示 name 为 'repassword' 的字段值必须与 name 为 'password' 的字段值保持一致。</div>
          </div>
          <div class="card-source">来源: 1.3 校验规则 & 1.4 validate练习</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是 Bootstrap？它所遵循的核心设计理念是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的前端框架，用于快速开发 Web 应用程序和网站。自 Bootstrap 3 起，它遵循的核心设计理念是“移动设备优先”，即框架的样式首先为移动设备设计，然后根据需要扩展到桌面设备。</div>
          </div>
          <div class="card-source">来源: 2.1 Bootstrap概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">请解释 Bootstrap 栅格系统的工作原理及其基本结构。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Bootstrap 的栅格系统是一个响应式、移动设备优先的流式网格系统，它将每一行（row）自动划分为最多12列。其工作原理是：1. “行（row）”必须包含在 `.container`（固定宽度）或 `.container-fluid`（100%宽度）中；2. 内容应放置在“列（column）”内；3. 只有“列”可以是“行”的直接子元素。</div>
          </div>
          <div class="card-source">来源: 2.4.1 什么是栅格系统</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Bootstrap 是如何通过 CSS 类实现对不同尺寸屏幕（如手机、平板、桌面）的响应式布局的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Bootstrap 通过预定义的媒体查询功能和一系列的 CSS 类前缀来实现响应式布局。开发者可以使用不同的类前缀来定义元素在不同屏幕尺寸下的列宽：`.col-xs-` 适用于超小屏幕（<768px），`.col-sm-` 适用于小屏幕（≥768px），`.col-md-` 适用于中等屏幕（≥992px），`.col-lg-` 适用于大屏幕（≥1200px）。</div>
          </div>
          <div class="card-source">来源: 2.4.2 媒体查询功能</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在 Bootstrap 中构建表单时，`.form-group` 和 `.form-control` 这两个类分别扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`.form-group` 类用于包裹标签（label）和表单控件（如 input），为它们提供最佳的排列和间距。`.form-control` 类应用于 `input`、`textarea` 和 `select` 等文本元素，使其宽度默认为100%，并应用全局的样式，如点击高亮效果。</div>
          </div>
          <div class="card-source">来源: 2.7 表单【重点】</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何在 Bootstrap 中创建一个水平排列的表单（即标签和输入框在同一行）？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">要创建水平表单，需要为 `<form>` 元素添加 `.form-horizontal` 类。然后结合使用 Bootstrap 的栅格系统类（如 `.col-sm-2` 和 `.col-sm-10`）来将标签（`<label>`）和控件组水平并排布局。这样做会使 `.form-group` 表现得像栅格系统中的行（row）。</div>
          </div>
          <div class="card-source">来源: 2.7 表单【重点】</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Bootstrap 提供了哪两种主要的布局容器？它们之间有什么区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Bootstrap 提供了两种主要的布局容器：`.container` 和 `.container-fluid`。区别在于：`.container` 用于固定宽度并支持响应式布局的容器，其最大宽度会随屏幕尺寸变化。而 `.container-fluid` 用于100%宽度的容器，它会占据全部视口的宽度。</div>
          </div>
          <div class="card-source">来源: 2.2 响应式页面案例</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
